<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Create Class Hierarchies with &#x60;extend&#x60;</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Create Class Hierarchies with &#x60;extend&#x60;</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>Create Class Hierarchies with <code>extend</code></p>
</div>

<div class="example">
    <script>
YUI().use('node', function(Y) {

function Bird(name) {
    this.name = name;
}

Bird.prototype.flighted   = true;  // Default for all Birds
Bird.prototype.isFlighted = function () { return this.flighted };
Bird.prototype.getName    = function () { return this.name };

function Chicken(name) {
    // Chain the constructors
    Chicken.superclass.constructor.call(this, name);
}
// Chickens are birds
Y.extend(Chicken, Bird);

// Define the Chicken prototype methods/members
Chicken.prototype.flighted = false; // Override default for all Chickens


function showInheritance() {
    var chicken = new Chicken('Little'),
        results = Y.one('#demo');

    results.setContent('Running: ' + (new Date()));

    results.append(((chicken instanceof Object) ?
        "<p>chicken IS an instance of Object.</p>" :
        "<p>chicken IS NOT an instance of Object.</p>"));

    results.append(((chicken instanceof Bird) ?
        "<p>chicken IS an instance of Bird.</p>" :
        "<p>chicken IS NOT an instance of Bird.</p>"));

    results.append(((chicken instanceof Chicken) ?
        "<p>chicken IS an instance of Chicken.</p>" :
        "<p>chicken IS NOT an instance of Chicken.</p>"));

    // Chicken instances inherit Bird methods and members
    results.append(((chicken.isFlighted()) ?
        "<p>chicken CAN fly.</p>" :
        "<p>chicken CAN NOT fly.</p>"));

    results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
}

Y.on('click', showInheritance, '#demo_btn');


});
</script>

<button id="demo_btn">Click me</button>
<div id="demo"></div>

</div>

<h3 id="instantiate-yui">Instantiate YUI</h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
    &#x2F;&#x2F; This method is in the &#x27;oop&#x27; module.  Since we require &#x27;node&#x27;
    &#x2F;&#x2F; for this example, and &#x27;node&#x27; requires &#x27;oop&#x27;, the &#x27;oop&#x27; module
    &#x2F;&#x2F; will be loaded automatically.</pre>


<h3 id="creating-a-class-hierarchy">Creating a class hierarchy</h3>
<p>In this example, we create a class <code>Bird</code> then create a subclass <code>Chicken</code>.</p>

<pre class="code prettyprint">function Bird(name) {
    this.name = name;
}

Bird.prototype.flighted   = true;  &#x2F;&#x2F; Default for all Birds
Bird.prototype.isFlighted = function () { return this.flighted };
Bird.prototype.getName    = function () { return this.name };

function Chicken(name) {
    &#x2F;&#x2F; Chain the constructors
    Chicken.superclass.constructor.call(this, name);
}
&#x2F;&#x2F; Chickens are birds
Y.extend(Chicken, Bird);

&#x2F;&#x2F; Define the Chicken prototype methods&#x2F;members
Chicken.prototype.flighted = false; &#x2F;&#x2F; Override default for all Chickens</pre>


<h3 id="instanceof-many-classes"><code>instanceof</code> many classes</h3>
<p>Unlike classes composed with augmentation, subclasses created with <code>extend</code> are also
considered instances of their superclass and all classes higher up the
inheritance tree.</p>

<p>We'll create an instance of <code>Chicken</code> and run some <code>instanceof</code> and method tests against it.</p>

<pre class="code prettyprint">function showInheritance() {
    var chicken = new Chicken(&#x27;Little&#x27;),
        results = Y.one(&#x27;#demo&#x27;);

    results.setContent(&#x27;Running: &#x27; + (new Date()));

    results.append(((chicken instanceof Object) ?
        &quot;&lt;p&gt;chicken IS an instance of Object.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Object.&lt;&#x2F;p&gt;&quot;));

    results.append(((chicken instanceof Bird) ?
        &quot;&lt;p&gt;chicken IS an instance of Bird.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Bird.&lt;&#x2F;p&gt;&quot;));

    results.append(((chicken instanceof Chicken) ?
        &quot;&lt;p&gt;chicken IS an instance of Chicken.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Chicken.&lt;&#x2F;p&gt;&quot;));

    &#x2F;&#x2F; Chicken instances inherit Bird methods and members
    results.append(((chicken.isFlighted()) ?
        &quot;&lt;p&gt;chicken CAN fly.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken CAN NOT fly.&lt;&#x2F;p&gt;&quot;));

    results.append(&quot;&lt;p&gt;chicken&#x27;s name is &quot; + chicken.getName() + &quot;.&lt;&#x2F;p&gt;&quot;);
}

Y.on(&#x27;click&#x27;, showInheritance, &#x27;#demo_btn&#x27;);</pre>


<h3 id="other-architecture-strategies">Other architecture strategies</h3>
<p>Take a look at <code>augment</code> and <code>mix</code> for different strategies of managing your code structure.

<h3 id="full-source">Full Source</h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {

function Bird(name) {
    this.name = name;
}

Bird.prototype.flighted   = true;  &#x2F;&#x2F; Default for all Birds
Bird.prototype.isFlighted = function () { return this.flighted };
Bird.prototype.getName    = function () { return this.name };

function Chicken(name) {
    &#x2F;&#x2F; Chain the constructors
    Chicken.superclass.constructor.call(this, name);
}
&#x2F;&#x2F; Chickens are birds
Y.extend(Chicken, Bird);

&#x2F;&#x2F; Define the Chicken prototype methods&#x2F;members
Chicken.prototype.flighted = false; &#x2F;&#x2F; Override default for all Chickens


function showInheritance() {
    var chicken = new Chicken(&#x27;Little&#x27;),
        results = Y.one(&#x27;#demo&#x27;);

    results.setContent(&#x27;Running: &#x27; + (new Date()));

    results.append(((chicken instanceof Object) ?
        &quot;&lt;p&gt;chicken IS an instance of Object.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Object.&lt;&#x2F;p&gt;&quot;));

    results.append(((chicken instanceof Bird) ?
        &quot;&lt;p&gt;chicken IS an instance of Bird.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Bird.&lt;&#x2F;p&gt;&quot;));

    results.append(((chicken instanceof Chicken) ?
        &quot;&lt;p&gt;chicken IS an instance of Chicken.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken IS NOT an instance of Chicken.&lt;&#x2F;p&gt;&quot;));

    &#x2F;&#x2F; Chicken instances inherit Bird methods and members
    results.append(((chicken.isFlighted()) ?
        &quot;&lt;p&gt;chicken CAN fly.&lt;&#x2F;p&gt;&quot; :
        &quot;&lt;p&gt;chicken CAN NOT fly.&lt;&#x2F;p&gt;&quot;));

    results.append(&quot;&lt;p&gt;chicken&#x27;s name is &quot; + chicken.getName() + &quot;.&lt;&#x2F;p&gt;&quot;);
}

Y.on(&#x27;click&#x27;, showInheritance, &#x27;#demo_btn&#x27;);


});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#instantiate-yui">Instantiate YUI</a>
</li>
<li>
<a href="#creating-a-class-hierarchy">Creating a class hierarchy</a>
</li>
<li>
<a href="#instanceof-many-classes"><code>instanceof</code> many classes</a>
</li>
<li>
<a href="#other-architecture-strategies">Other architecture strategies</a>
</li>
<li>
<a href="#full-source">Full Source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
